<template>
  <el-container>
    <el-main style="padding:15px">
      <div ref="banner" class="search-box">
        <!-- 查询form -->
        <el-form ref="queryForm" :inline="true" size="mini" :model="queryForm" class="demo-form-inline">
          <el-form-item label="标题" prop="title"><el-input v-model="queryForm.title" /></el-form-item>
          <el-form-item label="内容" prop="content"><el-input v-model="queryForm.content" /></el-form-item>
          <el-form-item collapse-node>
            <el-button type="primary" @click="getData">查询</el-button>
            <el-button type="info" @click="clear">清空</el-button>
          </el-form-item>
        </el-form>
        <!-- 查询form -->
      </div>
      <div class="grid-card" style="margin-top:10px">
        <el-row>
          <template>
            <vxe-grid
              id="msg"
              ref="table"
              v-bind="gridOptions"
              :data="datas"
              :border="true"
              stripe
              size="mini"
              :height="tableHeight"
              :loading="loading"
              :custom-config="{ storage: true }"
              :toolbar-config="tableToolbar"
              :checkbox-config="{ labelField: '', highlight: true, range: true, change: 'checkEvent' }"
              resizable
              keep-source
              highlight-hover-row
              highlight-current-row
              :edit-config="{ trigger: 'dblclick', mode: 'row' }"
              :pager-config="tablePage"
              style="width: 100%"
              @checkbox-change="checkEvent"
              @checkbox-all="checkEvent"
              @checkbox-range="checkEvent"
              @page-change="handleCurrentChange"
            >
              <template v-slot:toolbar_buttons>
                <el-button type="success" size="mini" style="margin-left:10px" @click="read()">标记已读</el-button>
              </template>
              <template #is_read="{ row}">
                <template v-if="row.is_read == 1">
                  <div style="color:#B3B3B3;">已读</div>
                </template>
                <template v-else>
                  <div style="color:red;font-weight: bold;">New!</div>
                </template>
              </template>
              <template #handle="{row}">
                <el-button type="primary" size="mini" @click="detailOpen(row)">详情</el-button>
              </template>
            </vxe-grid>
          </template>
        </el-row>
      </div>
      <MsgDetail ref="msgDetail" />
    </el-main>
  </el-container>
</template>

<script>
import * as api from '@/api/coder/msg.js'
import MsgDetail from '@/views/coder/msg/detail'

export default {
  name: 'Msg',
  components: {
    MsgDetail
  },
  data() {
    return {
      gridOptions: {
        columns: [
          { type: 'checkbox', width: 50 },
          { field: 'is_read', title: '状态', width: 60, slots: { default: 'is_read' }},
          { field: 'title', title: '标题', width: 300, sortable: true, showHeaderOverflow: true, showOverflow: true },
          { field: 'content', title: '内容', showOverflow: true },
          { field: 'create_time', title: '接收时间', width: 150, showOverflow: true },
          { field: '', title: '操作', fixed: 'right', width: 80, slots: { default: 'handle' }}
        ]
      },
      datas: [],
      queryForm: {},
      select_rows: [],
      tableHeight: document.documentElement.clientHeight - 340,
      loading: false,
      tablePage: {
        currentPage: 1,
        pageSize: 20,
        total: 0,
        pageSizes: [20, 50, 100, 200, 500],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true
      },
      tableToolbar: {
        slots: {
          buttons: 'toolbar_buttons'
        },
        refresh: true,
        print: true,
        zoom: true,
        custom: true,
        perfect: true
      }
    }
  },
  watch: {},
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      api.getData({ title: this.queryForm.title, content: this.queryForm.content, currentPage: this.tablePage.currentPage, pageSize: this.tablePage.pageSize })
        .then(res => {
          this.datas = res.list
          this.tablePage.total = res.totalResult
        })
        .finally(res1 => {
          this.loading = false
        })
    },
    handleCurrentChange: function({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.getData()
    },
    clear() {
      this.queryForm = {}
    },
    checkEvent({ checked, records }) {
      this.select_rows = records
    },
    detailOpen(row) {
      this.$refs.msgDetail.show(row.no)
      api.detailRead(row.id).then(res => {
        row.is_read = true
      })
    },
    read() {
      if (this.select_rows.length > 0) {
        this.$confirm('确认要标记勾选的消息为已读吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.read(this.select_rows).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.getData()
          })
        })
      } else {
        this.$message({
          message: '请至少选择一行数据进行操作',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style></style>
